<template>
  <div class="log-h5">
    <!-- 头部标题 -->
    <div class="header">
      <h3 class="title">操作日志</h3>
      <div class="count" v-if="logList.length">共 {{ logList.length }} 条记录</div>
    </div>

    <!-- 日志列表 -->
    <div class="log-list" v-if="logList.length">
      <div v-for="(log, index) in logList" :key="index" class="log-item">
        <!-- 时间轴点 -->
        <div class="timeline-dot">
          <span :style="{ backgroundColor: getUserTypeColor(log.userType) }" class="dot-icon">
            {{ getDictLabel(DICT_TYPE.USER_TYPE, log.userType)[0] }}
          </span>
        </div>

        <!-- 日志内容 -->
        <div class="log-content">
          <div class="log-header">
            <div class="user-info">
              <el-tag size="small" type="success" class="user-tag">
                {{ log.userName }}
              </el-tag>
              <span class="action-text">{{ log.action }}</span>
            </div>
            <div class="log-time">
              {{ formatDate(log.createTime, 'MM-DD HH:mm') }}
            </div>
          </div>

          <!-- 详细时间 -->
          <div class="full-time">
            {{ formatDate(log.createTime, 'YYYY-MM-DD HH:mm:ss') }}
          </div>
        </div>

        <!-- 连接线 -->
        <div v-if="index < logList.length - 1" class="timeline-line"></div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <el-empty description="暂无操作日志" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { OperateLogV2VO } from '@/api/system/operatelog'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getDictLabel, getDictObj } from '@/utils/dict'
import { getOperateLogPage } from '@/api/crm/operateLog'

defineOptions({ name: 'OperateLogH5' })

const logList = ref([])
const loading = ref(false)

const props = defineProps({
  id: String,
  bizType: String,
  clueValue: Object
})

/** 获取操作日志 */
const getOperateLog = async () => {
  loading.value = true
  try {
    const data = await getOperateLogPage({
      bizType: props.bizType,
      bizId: props.id
    })
    logList.value = data.list
  } finally {
    loading.value = false
  }
}

/** 获得 userType 颜色 */
const getUserTypeColor = (type: number) => {
  const dict = getDictObj(DICT_TYPE.USER_TYPE, type)
  switch (dict?.colorType) {
    case 'success':
      return '#67C23A'
    case 'info':
      return '#909399'
    case 'warning':
      return '#E6A23C'
    case 'danger':
      return '#F56C6C'
    default:
      return '#409EFF'
  }
}

watch(
  () => props.clueValue,
  (val) => {
    if (Object.keys(val || {}).length) {
      getOperateLog()
    }
  },
  { deep: true, immediate: true }
)
</script>

<style lang="scss" scoped>
.log-h5 {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;

    .title {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

    .count {
      font-size: 12px;
      color: #666;
      background: #e9ecef;
      padding: 2px 8px;
      border-radius: 10px;
    }
  }

  .log-list {
    padding: 16px;

    .log-item {
      position: relative;
      display: flex;
      margin-bottom: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .timeline-dot {
        position: relative;
        flex-shrink: 0;
        width: 32px;
        display: flex;
        justify-content: center;

        .dot-icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 24px;
          height: 24px;
          border-radius: 50%;
          color: #fff;
          font-size: 10px;
          font-weight: bold;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
      }

      .timeline-line {
        position: absolute;
        left: 15px;
        top: 24px;
        bottom: -20px;
        width: 2px;
        background: #e9ecef;
      }

      .log-content {
        flex: 1;
        margin-left: 12px;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 12px;
        border-left: 3px solid #409eff;

        .log-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: 8px;

          .user-info {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;

            .user-tag {
              flex-shrink: 0;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 60px;
            }

            .action-text {
              color: #333;
              font-size: 14px;
              line-height: 1.4;
              word-break: break-all;
            }
          }

          .log-time {
            font-size: 12px;
            color: #666;
            flex-shrink: 0;
            margin-left: 8px;
          }
        }

        .full-time {
          font-size: 11px;
          color: #999;
          margin-top: 4px;
        }
      }
    }
  }

  .empty-state {
    padding: 40px 20px;
    text-align: center;
  }
}

// 移动端适配
@media (max-width: 768px) {
  .log-h5 {
    .header {
      padding: 12px 16px;

      .title {
        font-size: 15px;
      }

      .count {
        font-size: 11px;
      }
    }

    .log-list {
      padding: 12px 16px;

      .log-item {
        margin-bottom: 16px;

        .timeline-dot {
          width: 28px;

          .dot-icon {
            width: 20px;
            height: 20px;
            font-size: 9px;
          }
        }

        .timeline-line {
          left: 13px;
          bottom: -16px;
        }

        .log-content {
          margin-left: 10px;
          padding: 10px;

          .log-header {
            .user-info {
              .action-text {
                font-size: 13px;
              }
            }

            .log-time {
              font-size: 11px;
            }
          }

          .full-time {
            font-size: 10px;
          }
        }
      }
    }
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .log-h5 {
    background: #1a1a1a;

    .header {
      background: #2d2d2d;
      border-bottom-color: #404040;

      .title {
        color: #fff;
      }

      .count {
        background: #404040;
        color: #ccc;
      }
    }

    .log-list {
      .log-item {
        .timeline-line {
          background: #404040;
        }

        .log-content {
          background: #2d2d2d;
          border-left-color: #409eff;

          .log-header {
            .user-info {
              .action-text {
                color: #fff;
              }
            }

            .log-time {
              color: #999;
            }
          }

          .full-time {
            color: #666;
          }
        }
      }
    }
  }
}
</style>
